<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>hello Vue</title>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> -->
    <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
    <!-- 视图 -->
    <div id="app">
        <!-- 声明变量 文本插值 -->
        {{ message }} {{ name }}
        <hr />
        <button id="clickBtn">
            <div>
                {{btnName}}
            </div>
        </button>
        <p>this is my first {{ message }} app.</p>
        <p>I successfully understood {{message}}`s reactivity.</p>

    </div>

    <!-- script脚本 包裹js代码 -->
    <script type="text/javascript">
        // 通过 new Vue()方法 可以获得vua应用对象
        var data = {
            message: 'hello Vue!',
            name: 'Lms',
            btnName: 'click'
        };
        new Vue({
            //  el 元素 #app id选择器（格式 # + div id）
            el: '#app',
            //    data 保存数据 在视图中声明了什么变量 就在data里面注册变量初始化赋值
            data: data
        });

        data.btnName = '点击'
        data.message = '刘莫识'
        data.name = 'app'
    </script>

    <!-- <script src="index.js"></script> -->

</body>



</html>